<template>
  <el-card shadow="never" style="margin-bottom: 29px;">
    <div class="type-layout">
      <ul class="type-list">
        <li v-for="item in typeList" :key="item.name" :class="item.test?'type-item test-item':'type-item'">
          <div class="item-lt">
            <img :src="item.img">
          </div>
          <div class="item-rt">
            <p class="item-title webfont-Medium">
              {{ item.name }}
            </p>
            <p class="item-info  ">{{ item.info }}</p>
            <div class="item-btn">
              <el-button v-if="item.test" type="info" size="small">测试中</el-button>
              <el-button v-else type="success" size="small" @click="goToCreate(item)">立即创建</el-button>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <el-dialog :visible.sync="dialogTableVisible" width="300px" :show-close="false">

      <div class="Code">
        <div style="height: 168px;width: 168px;margin: 0 auto;">
          <el-image :src="img" style="height: 100%;width: 100%;" lazy fit="cover" />
        </div>

        <div class="line-box">
          <div class="line-info">
            <span v-for="item in 16" />
          </div>
        </div>

        <div class="wx-tips webfont-Bold" style="margin-bottom: 24px;">联系客服</div>
      </div>

    </el-dialog>

  </el-card>
</template>

<script>
export default {
  name: 'Createtype',
  data() {
    return {
      img: require('@/assets/images/homepage/code3.png'),
      dialogTableVisible: false,
      typeList: [{ // uuid和ordid值为空，
        name: '自助投放',
        info: `根据你的产品、预算和需求，使用3YData高效地投放广告，支持创建广告、添加关键词、调整出价等系列操作，同时拥有趋势分析、数据监控等高效功能，省时、轻松。`,
        img: require('@/assets/images/create/type_1.svg'),
        free: true,
        test: false,
        type: 'self-help'
      },
      {
        name: '协同投放', // uuid和ordid值不能为空，
        info: `上传Apple Search  Ads账号证书，立即同步历史数据并享有3YData众多高效功能。`,
        img: require('@/assets/images/create/type_2.svg'),
        free: true,
        test: false,
        type: 'common'
      },
      {
        name: '智能投放',
        info: `智能托管模式，只需要输入你的产品预算与需求，即可以实现智能投放`,
        img: require('@/assets/images/create/type_3.svg'),
        free: true,
        test: false,
        type: 'AI'
      }
      ]
    }
  },
  mounted() {

  },
  methods: {
    async goToCreate(item) {
      // 移除掉之前存的信息
      window.localStorage.removeItem('series-DATA')
      window.localStorage.removeItem('group-DATA')

      if (item.type !== 'AI') {
        if (item.type === 'common') {
          const res = await this.$store.dispatch('overview/getAllAc', {
            currencyType: this.$store.state.user.unit,
            teamId: this.$store.state.team.teamId || ''
          })
          if (!res.length) {
            this.$message.closeAll()
            const pushFlag = !this.$isReadOnly(this.$store.state.user.userInfo.roleName)
            const msgInfo = pushFlag
              ? `<p class="flex" style="width:320px">
               <span>请先上传证书</span>
               <em class="pointer">去绑定</em>
             </p>`
              : `<p class="flex" style="width:320px">
               <span>请先上传证书</span>
             </p>`

            const message = this.$message({
              type: 'error',
              dangerouslyUseHTMLString: true,
              message: msgInfo
            })

            if (pushFlag) {
              message.$el.querySelector('em').onclick = () => {
                this.$message.closeAll()
                this.$router.push('/user/zs_bind')
              }
            }
            return
          }
        }
        this.$router.push({
          name: 'CreateSeries',
          query: {
            type: item.type,
            create: 'new'
          }
        })
      } else {
        this.dialogTableVisible = true
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped="true">
  @import '~@/styles/variables.scss';

  .type-layout {
    padding: 56px 24px;
    min-height: calc(100vh - 208px);

    .type-list {
      .type-item {
        display: flex;
        align-items: center;
        margin-bottom: 80px;

        &:last-of-type {
          margin: 0;
        }

        .item-lt {
          position: relative;
          background-color: black;
          border-radius: 4px;
          height: 160px;
          width: 264px;
          overflow: hidden;
          background: #FFFFFF;

          img {

            height: 160px;
            width: 264px;
          }

          .free {
            position: absolute;
            top: 22px;
            left: 22.8px;
            font-size: 14px;
            color: white;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
            letter-spacing: 1.5px;
          }
        }

        .item-rt {
          flex: 1;
          margin-left: 40px;

          .item-title {

            display: flex;
            align-items: center;
            height: 20px;
            font-size: 20px;
            color: #303133;

            em {
              margin-left: 8px;
              color: #3CC9CC;
              font-size: 1.2rem;
            }
          }

          .item-info {
            padding: 24px 0;
            max-width: 774px;
            text-align: justify;
            word-wrap: break-word;
            font-weight: 400;
            color: #616267;
            font-size: 14px;
            line-height: 1.75em;
          }

          .item-btn {
            ::v-deep button {
              padding: 8px 16px !important;
              overflow: hidden;

              span {
                font-size: 14px !important;
                line-height: 14px;
              }
            }

            .el-button--info {
              background-color: rgba(57, 68, 78, 0.2);
              color: rgba(51, 64, 74, 0.8);
              border: none;
            }
          }
        }
      }
    }
  }

  .test-item {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
  }

  .test-item .item-lt img {
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    -o-filter: blur(2px);
    filter: blur(2px);
  }

  ::v-deep .el-dialog {
    margin-top: 0 !important;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: cover;
    box-shadow: none;
    width: 300px;
    height: 355px;
    background: url(../../../../assets/images/login/wx-bg.png) no-repeat;
    background-size: cover;
    background-position: left -15px;
    overflow: hidden;
    border-radius: 14px;

    .el-dialog__header {
      border: none;
      font-size: 16px;

      .el-icon-close {
        /* font-size: 32px; */
        font-weight: 700;
        color: #333333;

      }
    }

    .line-box {
      margin: 0 auto;
      width: 240px;
      height: 36px;
      overflow: hidden;
      position: relative;
      margin-bottom: 24px;

      .line-info {
        position: absolute;
        width: 600px;
        bottom: 0;
        left: -12px;

        span {
          display: inline-block;
          width: 10px;
          height: 1px;
          background-color: #d9d9d9;
          margin: 0 4px;
        }
      }
    }
  }

  .wx-tips {
    text-align: center;
    font-size: 14px;
    line-height: 32px;
  }
</style>
